<template>
    <div>
        <div class="search-box">
            <!-- <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.inverterSn')}}</span>
                <el-input v-model="searchData.inverterSn" clearable></el-input>
            </div> -->
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.date')}}</span>
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="-"
                    :start-placeholder="$t('index.startTime')"
                    :end-placeholder="$t('index.endTime')"
                    value-format="yyyy-MM-dd"
                    :clearable='false'
                    :picker-options="pickerOptions"
                    @change="changeDate()">
                </el-date-picker>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
            <!--返回上一级路由-->
            <div class="search-box-sub right">
                <el-button icon="el-icon-back" @click='()=>{this.$router.go(-1)}' >{{$t('back')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)" :column='column'>
            <template #option="{data}">
                <div class="option-box">
                     <el-button icon="el-icon-document" :title="$t('index.js_seeDetails')" @click='showDetail(data)'></el-button>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <detailModal :detailDataList="detailDataList"></detailModal>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../../components/common/baseTable'
import detailModal from '../inverterAlarm/details'
export default {
    components: {
        baseTable,
        detailModal
    },
    props: {

    },
    data() {
        return {
            dateRange:['',''],
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                },
                shortcuts: [{
                    text: this.$t('all'),
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime());
                    picker.$emit('pick', ['', '']);
                    }
                },{
                    text: this.$t('near_day'),
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime());
                    picker.$emit('pick', [start, end]);
                    }
                },{
                    text: this.$t('near_week'),
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: this.$t('near_month'),
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: this.$t('near_year'),
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                    picker.$emit('pick', [start, end]);
                    }
                }]

            },
            wifiSn:this.$route.query.wifiSn,
            selectDatalist:[],
            detailDataList:{},
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('alarm.errorCode'),
                value: 'errorCode',
            },{
                title: this.$t('alarm.errorMessage'),
                value: 'errorMessage',
            },{
                title: this.$t('alarm.date'),
                value: 'timeStringVal',
            },{
                title: this.$t('control'),
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.initTable()
    },
    methods: {
        changeDate(){
            this.initTable()
        },
        showDetail(data){
            this.detailDataList = data
            this.$store.commit('setNewVisible',true)
        },
        async initTable(){
            this.loading = true
            let res = await this.API.showAlarmRecord({
                size: this.size,
                current: this.current,
                wifiSn:this.wifiSn,
                startTime:this.dateRange[0],
                endTime:this.dateRange[1]
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        }
    },
};
</script>

<style lang="less">

</style>
